<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册step1</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css"/>
    <!--<link rel="stylesheet" href="../../css/lol-public.css"/>-->
    <link rel="stylesheet" href="../../fonts/iconfont.css">
    <link rel="stylesheet" href="../../css/login.css"/>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="header">
        <div class="nav clearfix">
            <div class="container clearfix">
                <div class="pull-left vp-logo public-icon"></div>
                <form action="" class="form-inline pull-right form-lang">
                    <div class="form-group">
                        <label for="" class="text-white login-language">语言</label>
                        <select name="" id="" class="lang-choose">
                            <option value="简体中文">简体中文</option>
                            <option value="English">English</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="bodyer">
        <div class="register-bg">
            <div class="container">
                <h3 class="title-en text-center">Welcome to register</h3>
                <h3 class="title-chinese text-center font-basic mb10">欢迎注册</h3>
                <b class="underLine"></b>
                <ul class="step-bar">
                    <li class="step-item step1st active">
                        <span class="step-circle"></span>
                        <b class="first-line"></b>
                        <b class="second-line"></b>
                        <p>注册账户</p>
                    </li>
                    <li class="step-item step2nd">
                        <span class="step-circle"></span>
                        <b class="first-line"></b>
                        <b class="second-line"></b>
                        <p>填写信息</p>
                    </li>
                    <li class="step-item step3rd">
                        <span class="step-circle"></span>
                        <b class="first-line"></b>
                        <b class="second-line"></b>
                        <p>注册成功</p>
                    </li>
                </ul>
                <form action="" class="register-form font-basic form-horizontal">
                    <div class="form-group">
                        <label for="" class="col-xs-3 register-form-label">用户名</label>
                        <div class="col-xs-4">
                            <input type="text" class="register-form-element register-form-input">
                        </div>
                        <div class="col-xs-4 username-intro">
                            <p>用于账号登录，支持英文、数字、下划线，5-20个字符</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-xs-3 register-form-label">密码</label>
                        <div class="col-xs-4">
                            <input type="text" class="register-form-element register-form-input">
                        </div>
                        <div class="col-xs-4 pwd-intro">
                            <p>7-20个字符，必须包含字母、数字、或者特殊符号中的两种</p>
                            <div class="pwd-safety">
                                <b></b>
                                <b></b>
                                <b></b>
                            </div>
                        </div>
                        <div class="safety-classify">
                            <div class="safety-high">
                                <p>
                                    <i class="iconfont icon-statuscomplete"></i>
                                    高
                                </p>
                                <div class="pwd-safety-high">
                                    <b></b>
                                    <b></b>
                                    <b></b>
                                </div>
                            </div>
                            <div class="safety-high" style="display: none;">
                                <p>
                                    <i class="iconfont icon-statuscomplete"></i>
                                    中
                                </p>
                            </div>
                            <div class="safety-high" style="display: none">
                                <p>
                                    <i class="iconfont icon-statuscomplete"></i>
                                    低
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-xs-3 register-form-label">确认密码</label>
                        <div class="col-xs-4 pwd-confirm active">
                            <input type="text" class="register-form-element register-form-input">
                        </div>
                        <div class="col-xs-4 pwd-confirm-intro">
                            <p>
                                <i class="iconfont icon-statusremind"></i>
                                两次输入的密码不一致
                            </p>
                        </div>
                    </div>
                    <div class="form-group mb5">
                        <label for="" class="col-xs-3 register-form-label">验证码</label>
                        <div class="col-xs-4 verification-codes">
                            <input type="text" class="register-form-element register-form-input">
                            <div class="verification-img">
                                <img src="../../img/verify-img/verify-img.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb5">
                        <label for="" class="col-xs-3 "></label>
                        <div class="col-xs-4 checkbox register-checkbox">
                            <label for=""><input type="checkbox" >我接受《VPGAME用户协议》
                            </label>
                        </div>
                    </div>
                    <div class="form-group mb5">
                        <label for="" class="col-xs-3 "></label>
                        <div class="col-xs-4 ">
                            <button class="btn btn-blueBasic register-btn">下一步</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>